<script setup lang="ts" name="ChatHome">
import { onMounted, ref } from 'vue';
import { getFriend } from '@/api/data';
import PersonCard from '@/components/PersonCard/index.vue';
import ChatWindow from './components/ChatWindow/index.vue';
import { Friend } from '@/types';

onMounted(async () => {
  const res = await getFriend();
  personList.value = res;
});

const personList = ref<any>([]);
const pcCurrent = ref('');
const showChatWindow = ref(false);
const friendInfo = ref<Friend>({} as Friend);

const clickPerson = (person: Friend) => {
  // 显示聊天框
  showChatWindow.value = true;
  // 当前用户
  pcCurrent.value = person.id;
  friendInfo.value = person;
};
</script>

<template>
  <div class="chathome-page">
    <div class="chat-left">
      <div class="title">
        <h1>聊天室</h1>
      </div>

      <div class="online-person">
        <span class="online-text">聊天列表</span>
        <div class="person-cards">
          <div
            class="person-list"
            v-for="personInfo in personList"
            :key="personInfo.id"
            @click="clickPerson(personInfo)"
          >
            <PersonCard :personInfo="personInfo" :pcCurrent="pcCurrent"></PersonCard>
          </div>
        </div>
      </div>
    </div>

    <div class="chat-right">
      <div v-if="showChatWindow" style="height: 100%">
        <ChatWindow :friendInfo="friendInfo" />
      </div>
      <div v-else class="showIcon">
        <span class="iconfont icon-snapchat"></span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chathome-page {
  display: flex;
  height: 100%;

  .chat-left {
    width: 280px;
    padding-left: 20px;
    .title {
      color: #fff;

      h1 {
        font-size: 24px;
        letter-spacing: 6px;
      }
    }

    .online-person {
      margin-top: 100px;

      .online-text {
        color: rgb(176, 178, 189);
      }

      .person-cards {
        height: 60vh;
        margin-top: 20px;
        overflow: hidden;
        overflow-y: scroll;
        &::-webkit-scrollbar {
          width: 0; /* Safari,Chrome 隐藏滚动条 */
          height: 0; /* Safari,Chrome 隐藏滚动条 */
          display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
        }
      }
    }
  }

  .chat-right {
    flex: 1;
    padding-right: 30px;
    .showIcon {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      .icon-snapchat {
        width: 300px;
        height: 300px;
        font-size: 300px;
      }
    }
  }
}
</style>
